import { ScrollView, View } from "@tarojs/components";

import HeaderSearch from "@/components/HeaderSearch/index";
import Header from "@/components/Header/index";
import Footer from "@/components/Footer/index";
import GoodsTitle from "@/components/GoodsTitle/index";
import { useEffect, useRef, useState } from "react";
import {
  Button,
  Image,
  Popup,
  Form,
  Cell,
  Toast,
  Input,
  Dialog,
  Pagination,
  Textarea,
  Empty,
} from "@taroify/core";
import { requestPOST } from "@/request";
import { PhotoFail } from "@taroify/icons";

export default function Index() {
  const [list, setList] = useState<any>([]);
  const [current, setCurrent] = useState(1);
  const [count, setCount] = useState(0);
  const [open, setOpen] = useState(false);
  const [form, setForm] = useState({
    email: "",
    country: "",
    message: "",
  });

  const getList = (page?: number) => {
    requestPOST(`shop/shopFeedbackList`, {
      isRead: 0,
      pageNum: page || current,
      pageSize: 5,
    }).then((res: any) => {
      setCount(Math.ceil(res.total / 5));
      setList([...res.vos]);
    });
  };

  const editList = (item) => {
    setForm({ ...item });
    setOpen(true);
  };

  const delList = (item) => {
    Dialog.confirm({
      title: "提示",
      message: "您确定要删除吗？",
      onConfirm() {
        requestPOST(`shop/shopFeedbackDel/${item.id}`).then(() => {
          Toast.open({ type: "success", message: "删除成功" });
          getList();
        });
      },
    });
  };

  const handleChange = (page) => {
    setCurrent(page);
    getList(page);
  };

  useEffect(() => {
    getList();
  }, []);

  const formRef = useRef<any>();

  return (
    <View className="taroBox">
      <HeaderSearch />
      <Header />
      <View>
        <GoodsTitle title="客户反馈" isMore={false} />
        <View
          style={{
            display: "flex",
            flexDirection: "column",
            gap: "20px",
            padding: "14px",
          }}
        >
          {!list.length && (
            <Empty>
              <Empty.Image />
              <Empty.Description>暂无数据</Empty.Description>
            </Empty>
          )}
          {list.map((item) => (
            <View
              key={item.id}
              style={{
                padding: "10px",
                boxShadow: "0 0 .3125rem 0 hsla(0, 0%, 49%, 0.45)",
              }}
            >
              <View
                style={{
                  display: "flex",
                  gap: "10px",
                }}
              >
                <View style={{ width: "102px" }}>
                  <Image
                    src={
                      item.image
                        ? process.env.TARO_APP_API + item.image
                        : "error"
                    }
                    width={102}
                    height="100%"
                    mode="aspectFill"
                    fallback={<PhotoFail />}
                  />
                </View>

                <View
                  style={{
                    fontSize: "14px",
                    display: "flex",
                    flexDirection: "column",
                    gap: "5px",
                  }}
                >
                  <View>邮件：{item.email}</View>
                  <View>国家/地区：{item.country}</View>
                  <View>消息：{item.message}</View>
                </View>
              </View>
              <View
                style={{
                  display: "flex",
                  gap: "20px",
                  alignItems: "center",
                  marginTop: "10px",
                }}
              >
                <Button
                  color="primary"
                  size="small"
                  variant="outlined"
                  onClick={() => editList(item)}
                >
                  详情
                </Button>
                <Button
                  color="danger"
                  size="small"
                  variant="outlined"
                  onClick={() => delList(item)}
                >
                  删除
                </Button>
              </View>
            </View>
          ))}
        </View>
        <View style={{ marginBlock: "1.25rem", padding: "0 .875rem" }}>
          <Pagination
            current={current}
            siblingCount={1}
            count={count}
            onChange={(page) => handleChange(page)}
          >
            <Pagination.Item type="start-ellipsis" />
            <Pagination.Item type="end-ellipsis" />
          </Pagination>
        </View>
      </View>
      <Footer />

      <Popup
        open={open}
        placement="center"
        style={{ height: "auto" }}
        rounded
        onClose={() => {
          setForm({
            email: "",
            country: "",
            message: "",
          });
          setOpen(false);
          formRef.current?.reset();
        }}
        lock={false}
      >
        <ScrollView style={{ maxHeight: "90vh" }} scrollY>
          <View style={{ width: "90vw", padding: "14px 0" }}>
            <Form ref={formRef} defaultValues={form}>
              <Cell.Group inset>
                <Form.Item name="name">
                  <Form.Label>邮箱</Form.Label>
                  <Form.Control>
                    <Input placeholder="邮箱" value={form.email} readonly />
                  </Form.Control>
                </Form.Item>
                <Form.Item name="country">
                  <Form.Label>国家/地区</Form.Label>
                  <Form.Control>
                    <Input
                      placeholder="国家/地区"
                      value={form.country}
                      readonly
                    />
                  </Form.Control>
                </Form.Item>
                <Form.Item name="message">
                  <Form.Label>消息</Form.Label>
                  <Form.Control>
                    <Textarea
                      readonly
                      placeholder="消息"
                      value={form.message}
                      style={{ height: "5rem" }}
                      limit={255}
                    ></Textarea>
                  </Form.Control>
                </Form.Item>
              </Cell.Group>
              <View
                style={{
                  margin: "1rem",
                  display: "flex",
                  alignItems: "center",
                  gap: "30px",
                }}
              >
                <Button
                  shape="round"
                  block
                  color="primary"
                  variant="outlined"
                  onClick={() => {
                    setForm({
                      email: "",
                      country: "",
                      message: "",
                    });
                    setOpen(false);
                    formRef.current?.reset();
                  }}
                >
                  取消
                </Button>
              </View>
            </Form>
          </View>
        </ScrollView>
      </Popup>
    </View>
  );
}
